JavaScriptを利用してグラフィカルな棒グラフを描く
今回は、グラフィカルな棒グラフを作成する方法を紹介します。前回紹介した方法は、■の文字で棒グラフを作成していたため、あまり見栄えの良いグラフにはなりませんでした。そこで、今回は四角形を描画してグラフを作成する方法を紹介します。

→ 見出し、数値、色の配列を準備する
 
今回も最初にグラフの基となるデータを配列で指定します。変数「max」は項目の数、midashi[?]は各項目の見出し、data[?]は各項目の数値になります。また、今回は項目ごとに色を変えるため、iro[?]の配列で色を指定しています。
<SCRIPT language="JavaScript">
<!--
max = 5;
midashi = new Array(max);
data = new Array(max);
iro = new Array(max);
midashi[1] = "大変よい";
midashi[2] = "よい";
midashi[3] = "ふつう";
midashi[4] = "悪い";
midashi[5] = "とても悪い";
data[1] = 20;
data[2] = 28;
data[3] = 35;
data[4] = 16;
data[5] = 8;
iro[1] = "#FF0000";
iro[2] = "#FF9900";
iro[3] = "#669900";
iro[4] = "#660099";
iro[5] = "#000099";
// -->
</SCRIPT>


→ グラフ表示用のTABLEをJavaScriptで記述する
 
続いて、配列の値を基にグラフを作成していきます。これは、前回の講座で解説した手順と全く同じで、TABLEタグをdocument.writeで書き出します。
<SCRIPT language="JavaScript">
<!--
　　：
　　：
（手順1の配列宣言）
　　：
　　：
document.write("<TABLE border=1 frame=box rules=none cellpadding=5>");
document.write("</TABLE>");
// -->
</SCRIPT>


→ JavaScriptでSPANの背景色を指定してグラフを表示する
 
あとは、TBALE内に見出しと棒グラフを書き出し、グラフを完成させます。今回は、SPANタグにスタイルシートを適用し、横幅と背景色を指定することによりグラフを描画します。グラフの1目盛りを10ピクセルとする場合のJavaScriptは、以下のようになります。
<SCRIPT language="JavaScript">
<!--
　　：
　　：
（手順1の配列宣言）
　　：
　　：
document.write("<TABLE border=1 frame=box rules=none cellpadding=5>");
for(i = 1; i <= max ; i++){
document.write("<TR><TD align=right>");
document.write(midashi[i]);
document.write("</TD><TD nowrap>");
for(j = 1; j <= data[i]; j++){
document.write("<SPAN style='width:10px; background-color:"+iro[i]+"'>")
document.write("</SPAN>");
}
document.write("　"+data[i]);
}
document.write("</TABLE>");
// -->
</SCRIPT>


�e�����[�N����EC�i�r Yahoo �y�V LINE���f�[�^�����[�������z500�~�`�I
�����z�[���y�[�W �������N���W�b�g�J�[�h �C�O�i���q�����@�C�O���s�����������I �C�O�z�e��